<template>
  <div class="goodsList">
    <ul class="rec-content">
      <li v-for="(img,index) in imageList"
          :key="index"
          @click="handleGoodsDetail(1)">
        <div class="pic">
          <!-- 图片懒加载 -->
          <img v-lazy="img"
               width="100%"
               height="100%">
        </div>
        <p class="title">vivi X27 全网通6.5寸大屏8运行128内存智能人脸指纹平板电脑手机</p>
        <div class="info">
          <div>
            <span class="symbol">￥</span>
            <span class="price">508</span>
            <span class="quantity">已售3.9万件</span>
          </div>
          <span class="buy">购买</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'goodsList',
  data () {
    return {
      /* 后端获取数据 */
      imageList: [
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img12.360buyimg.com/jdcms/s300x300_jfs/t27091/115/2577132710/306881/247bd325/5c06243eN7edaa545.jpg.webp'
      ]
    }
  },
  components: {

  },
  methods: {
    /* 跳转到商品明细页面 */
    handleGoodsDetail (id) {
      console.log('去明细页面');
      this.$router.push({
        name: 'goodsDetail',
        params: { id: id }
      })
    }
  }
}
</script>

<style scoped lang="css">
.goodsList {
  position: relative;
}

.rec-content {
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 换行 */
  flex-wrap: wrap;
  margin-bottom: 100px;
  background-color: #f4f4f4;
}
.rec-content li {
  width: 373px;
  height: 540px;
  margin-bottom: 6px;
  background-color: #fff;
}
.pic {
  width: 100%;
  height: 374px;
}
/* 标题 */
.title {
  overflow: hidden;
  height: 54px;
  padding: 0 16px;
  line-height: 54px;
  font-size: 26px;
  color: #151516;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding: 0 16px;
  font-size: 28px;
  color: #e02e24;
}
.symbol {
  font-size: 24px;
}
.price {
  margin-right: 5px;
  font-size: 33px;
  font-weight: bold;
}
.quantity {
  font-size: 24px;
  color: #9c9c9c;
}
.buy {
  padding: 3px 10px;
  border: 1px dashed #c6c6c6;
  border-radius: 5px;
  color: #58595b;
}
</style>
